<template>
  <ContentWrap>
    <template #header>
      <BaseButton @click="go(-1)">
        {{ t('common.back') }}
      </BaseButton>
    </template>
    <!--    顶部查询项-->
    <el-form :model="form" inline label-width="70px">
      <el-form-item :label="t('retail.product_name')">
        <el-input
          v-model="form.product_name"
          clearable
          :placeholder="t('retail.product_name')"
          style="width: 250px"
        />
      </el-form-item>
      <el-form-item :label="t('retail.model_id')">
        <el-select
          v-model="form.model_id"
          :filterable="true"
          :placeholder="t('retail.model_id')"
          :clearable="false"
          style="width: 250px"
        >
          <el-option
            v-for="item in modelList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="initialize">查询</el-button>
        <el-button icon="Refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border style="width: 100%">
      <el-table-column :label="t('expandCustomer.serialNumber')" prop="id" min-width="50" />
      <el-table-column
        :label="t('retail.product_name')"
        min-width="200"
        prop="product_name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('retail.model_id')"
        min-width="200"
        prop="model_name"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        :label="t('retail.seller_id')"
        min-width="200"
        prop="seller_name"
        :show-overflow-tooltip="true"
      />
    </el-table>
  </ContentWrap>
</template>

<script lang="ts" setup>
import { ElButton } from 'element-plus'
import { ContentWrap } from '@/components/ContentWrap'
import { getGoodsListApi } from '@/api/retail'
import { getEnumApi } from '@/api/supply'
const { t } = useI18n()
const { push, go } = useRouter()
const { query } = useRoute()

const tableLoading = ref<boolean>(false)
const dataList = ref<any[]>([])
const paginationTotal = ref<number>(0)

const modelList = ref<Array<Record<string, any>>>([])
const form = ref<Record<string, any>>({
  pageIndex: 1,
  pageSize: 15
})

const getDropDownBoxInfo = async () => {
  const resp = await getEnumApi({ field: 'model' })
  modelList.value = resp.data.model
}

const initialize = async () => {
  tableLoading.value = true
  const params = JSON.parse(JSON.stringify(form.value))
  delete params.date
  params.seller_id = query.id as string
  const resp = await getGoodsListApi(params)
  dataList.value = resp.data.list
  paginationTotal.value = resp.data.total
  tableLoading.value = false
}

const reset = () => {
  form.value = {
    pageIndex: 1,
    pageSize: 15
  }
  paginationTotal.value = 0
  initialize()
}

onMounted(() => {
  getDropDownBoxInfo()
  initialize()
})
</script>
